<%@ include file="/init.jsp"%>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	
</script>
<script type="text/javascript">
	$(document).ready(function() { 	
		//cancel
		$("#questionbankCancelUpdate, #questionbankCancelUpdateBottom").click(function(){
			$("#ItemView").html(categoryView($("#SCORMQuestionBankTree a[class='jstree-clicked']").text()));
			categoryViewbtn();
		});
		
		//update
		$("#questionbankUpdate, #questionbankUpdateBottom").click(function(){
			$.ajax({
				type : "POST",
				datatype : "json",
				url : "<portlet:resourceURL id='update-quiz-catalogy'/>",
				data: {"quizCategoryId": $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id"),
					"content": $("#SCORMCategoryNameEdit").val()},
				success: function(data){
					var str = "<ins class='jstree-icon'>&nbsp;</ins>"
					str+= data.content;
					$("#c" + data.id).children("a").html(str);
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
					$("#ItemView").html(categoryView(data.content));
					categoryViewbtn();
				},
				error: function(){
					alert("error");
				}
			});
		});
		
		//edit
		$("#questionbankEdit, #questionbankEditBottom").click(function(){
			$("#ItemView").html(categoryEditView($("#SCORMQuestionBankTree a[class='jstree-clicked']").text()));
			editbtn();
		});
		
		//remove
	 	$("#questionbankRemoveElement, #questionbankRemoveElementBottom").click(function(){
	 		var jstreeLast = $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("class").indexOf("jstree-last");
			$.ajax({
				type : "POST",
				datatype : "json",
				url : "<portlet:resourceURL id='remove-quiz-catalogy'/>",
				data: {"quizCategoryId": $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id")},
				success: function(data){
					if($("#" + data.id).prev("li").html()!=null){
						if(jstreeLast !=-1){
							$("#" + data.id).prev("li").addClass("jstree-last");
						}
						$("#" + data.id).prev("li").children("a").addClass("jstree-clicked");
					}else{
						if(jstreeLast !=-1){
							$("#" + data.id).parent("li").addClass("jstree-last");
						}
						$("#" + data.id).parent("li").children("a").addClass("jstree-clicked");
					}
					$("#"+data.id).remove();
					$("#ItemView").html(categoryView($("#SCORMQuestionBankTree a[class='jstree-clicked']").text()));
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error: function(){
					alert("error");
				}
			});
		}); 
		
		//ajax load windows
		$.ajax({
			type: "GET",
			datatype: "html",
			url: "<portlet:resourceURL id='load'/>",
			success: function(data){
				$("#SCORMQuestionBankTree ul").html(data);
				rootbtn();
				category("c0");
			},
			error: function(){
				alert("error");
			}
		});
		

		//ajax add category
		$("#questionbankAddCategory, #questionbankAddCategoryBottom").click(function() {
			if($("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("class").indexOf("jstree-open") == -1){
				$("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().removeClass("jstree-closed");
				$("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().addClass("jstree-open");
			}
			
			$.ajax({
				type : "POST",
				datatype : "html",
				url : "<portlet:resourceURL id='new-question-catalogy'/>",
				data: {"parentId": $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id")},
				success : function(data) {
					$("#SCORMQuestionBankTree a[class='jstree-clicked']").removeClass("jstree-clicked");
					var parent = data.split("!@#");
					if($("#"+parent[0]).html().indexOf("ul")==-1){
						$("#"+parent[0]).append("<ul></ul>");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}else{
						$("li."+parent[0]).removeClass("jstree-last");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}	
					$("#ItemView").html(categoryEditView("New Category"));
					category(parent[2]);
					editbtn();
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error : function() {
					alert("error");
	
				}
			});
		});
		
		
		//ajax add quiz
		$("#questionbankAddQuiz, #questionbankAddQuizBottom").click(function() {
			if($("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("class").indexOf("jstree-open") == -1){
				$("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().removeClass("jstree-closed");
				$("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().addClass("jstree-open");
			}
			
			$.ajax({
				type : "POST",
				datatype : "html",
				url : "<portlet:resourceURL id='new-quiz'/>",
				data: {"parentId": $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id")},
				success : function(data) {
					$("#SCORMQuestionBankTree a[class='jstree-clicked']").removeClass("jstree-clicked");
					var parent = data.split("!@#");
					if($("#"+parent[0]).html().indexOf("ul")==-1){
						$("#"+parent[0]).append("<ul></ul>");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}else{
						$("li."+parent[0]).removeClass("jstree-last");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}	
					$("#ItemView").html(categoryEditView("New Quiz"));
					category(parent[2]);
					editbtn();
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error : function() {
					alert("error");
				}
			});
		});
		
		
		//List Function
		//jq change css tree and process event
		function category(id){
			$("#" + id + " a").mouseenter(function() {
				$(this).addClass("jstree-hovered");
			});

			$("#" + id + " a").mouseleave(function() {
				$(this).removeClass("jstree-hovered");
			});

			$("#" + id + " a").click(function() {
					$("#SCORMQuestionBankTree a").removeClass("jstree-clicked");
					$(this).addClass("jstree-clicked");
					if($(this).parent().html() == $("li#c0").html()){
						$("#ItemView").html("<b>Question base</b>");
						rootbtn();
					}else{
						$("#ItemView").html(categoryView($(this).text()));
						categoryViewbtn();
					}
			});
			
			// open and close tree
			$("#" + id + " ins").click(function() {
					if($(this).parent("li").attr("class").indexOf("jstree-open") != -1){
						$(this).parent("li").removeClass("jstree-open");
						$(this).parent("li").find("a").removeClass("jstree-clicked");
						$(this).parent("li").addClass("jstree-closed");
						
					}else{
						$(this).parent("li").removeClass("jstree-closed");
						$(this).parent("li").addClass("jstree-open");
					}
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
			});
		}
		
		// change status button
		function categoryViewbtn(){ //edit, add cate, add ques, remove
			$("#quizContentBottomMenu").show();
	        $("#questionbankUpdateBottom").hide();
	        $("#questionbankCancelUpdateBottom").hide();
	        $("#questionbankEditBottom").show();
	        $("#questionbankAddCategoryBottom").show();
	        $("#questionbankAddQuestionsBottom").hide();
            $("#questionbankAddQuizBottom").show();
	        $("#questionbankRemoveElementBottom").show();

	        $("#questionbankUpdate").hide();
	        $("#questionbankCancelUpdate").hide();
	        $("#questionbankEdit").show();
	        $("#questionbankAddCategory").show();
	        $("#questionbankAddQuestions").hide();
            $("#questionbankAddQuiz").show();
	        $("#questionbankRemoveElement").show();
		}
		
		function rootbtn(){ // top add cate, ada ques
			 $("#quizContentBottomMenu").hide();
             $("#questionbankUpdate").hide();
             $("#questionbankCancelUpdate").hide();
             $("#questionbankEdit").hide();
             $("#questionbankAddCategory").show();
             $("#questionbankAddQuestions").hide();
             $("#questionbankAddQuiz").show();
             $("#questionbankRemoveElement").hide();
		}
		
		function editbtn(){ //cancel update
			 $("#SCORMAddAnswersButtonBlock").show();
	         $("#questionbankEdit").hide();
	         $("#questionbankUpdate").show();
	         $("#questionbankCancelUpdate").show();
	         $("#questionbankEditBottom").hide();
	         $("#questionbankUpdateBottom").show();
	         $("#questionbankCancelUpdateBottom").show();

	         $("#quizContentBottomMenu").show();
	         $("#questionbankAddQuiz").hide();
	         $("#questionbankAddCategory").hide();
	         $("#questionbankAddQuestions").hide();
	         $("#questionbankRemoveElement").hide();
	         $("#questionbankAddCategoryBottom").hide();
	         $("#questionbankAddQuestionsBottom").hide();
	         $("#questionbankRemoveElementBottom").hide();
	         $("#questionbankAddQuizBottom").hide();
		}
		
		
		

		//--Templates in ItemView--
		// category view
		 function categoryView(Title){
			 var result = "<div id='SCORMCategoryView'>";
			 result+="<div>";
			 result+="<div class='quizSection'>";
			 result+="<div class='quizSectionTitle'> Category: </div>";
			 result+="<div style='clear:both'></div>";
			 result+="</div>";
			 result+="<div id='SCORMCategoryNameView' class='SCORMResult'>"+Title+"</div>";
			 result+="</div>";
			 result+="<div style='clear:both'></div>";
			 result+="</div>";
			 return result;
		}
		
		//category Edit view
		function categoryEditView(Title){
		     var result = "<div id='SCORMCategoryView'>";
		     result+="<div>";
		     result+="<div class='quizSection'>";
		     result+="<div class='quizSectionTitle'> Category: </div>";
		     result+="<div style='clear:both'></div>";
		     result+="</div>";
		     result+="<input type='text' id='SCORMCategoryNameEdit' value='"+ Title +"'/>";
		     result+="</div>";
		     result+="<div style='clear:both'></div>";
		     result+="</div>";
		     return result;
		}
	});
</script>

<div class="SCORMTitle">Question Editor</div>
<br clear="all" />

<div id="SCORMBankWrapper">
	<div class="fluidLeftPart ui-layout-west" id="aui_3_4_0_1_820">
		<div id="SCORMQuestionBankTree"
			class="jstree jstree-0 jstree-default jstree-focused">
			<ul>
			</ul>
		</div>
	</div>

	<div class="fluidRightPart ui-layout-center" id="aui_3_4_0_1_1397">
		<div id="quizContent_">
			<div class="SCORMPackageListHeaderButtons" id="aui_3_4_0_1_1396">
				<abbr title="Remove current">
					<button id="questionbankRemoveElement"
						class="button28 questionarieTreeEditButton buttonRemove"
						style="display: none;"></button>
				</abbr> <abbr title="Add question">
					<button id="questionbankAddQuestions"
						class="button28 questionarieTreeEditButton buttonAddQuestion"
						style="display: block;"></button>
				</abbr>
				
				<abbr title="Add quiz">
					<button id="questionbankAddQuiz"
						class="button28 questionarieTreeEditButton buttonAddQuiz"
						style="display: block;"></button>
				</abbr>
				
				 <abbr title="Add category" id="aui_3_4_0_1_1453">
					<button id="questionbankAddCategory"
						class="button28 questionarieTreeEditButton buttonAddCategory"
						style="display: block;"></button>
				</abbr> <abbr title="Edit current" id="aui_3_4_0_1_1395">
					<button id="questionbankEdit"
						class="button28 questionarieTreeEditButton buttonEdit"
						style="display: none;"></button>
				</abbr> <abbr title="Save">
					<button id="questionbankUpdate" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Save</button>
				</abbr> <abbr title="Cancel" id="aui_3_4_0_1_1429">
					<button id="questionbankCancelUpdate" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Cancel</button>
				</abbr>
				<div style="clear: both"></div>
			</div>
		</div>
		<div id="ItemView">
			<b>Question base</b>
		</div>
		<div id="quizContentBottomMenu" style="display: none;">
			<div class="SCORMPackageListHeaderButtonsBottom">
				<abbr title="Remove current">
					<button id="questionbankRemoveElementBottom"
						class="button28 questionarieTreeEditButton buttonRemove"
						style="display: block;"></button>
				</abbr> <abbr title="Add question">
					<button id="questionbankAddQuestionsBottom"
						class="button28 questionarieTreeEditButton buttonAddQuestion"
						style="display: block;"></button>
				</abbr> 
				
				<abbr title="Add quiz">
					<button id="questionbankAddQuizBottom"
						class="button28 questionarieTreeEditButton buttonAddQuiz"
						style="display: block;"></button>
				</abbr>
				
				
				<abbr title="Add category">
					<button id="questionbankAddCategoryBottom"
						class="button28 questionarieTreeEditButton buttonAddCategory"
						style="display: block;"></button>
				</abbr> <abbr title="Edit current">
					<button id="questionbankEditBottom"
						class="button28 questionarieTreeEditButton buttonEdit"
						style="display: block;"></button>
				</abbr> <abbr title="Save">
					<button id="questionbankUpdateBottom" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Save</button>
				</abbr> <abbr title="Cancel">
					<button id="questionbankCancelUpdateBottom" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Cancel</button>
				</abbr>
				<div style="clear: both"></div>
			</div>
		</div>
		<div id="RichTextEdit"></div>
	</div>
	<div style="width: 100%; clear: both"></div>
</div>